<template>
   <div class="app-order">
    <Query
      :items="queryColumns"
      :initial-params="queryParams"
      @query="handleQuery"
      labelWidth="100px"
    />
    <Table
      :table-columns="tableColumns"
      :table-loading="tableLoading"
      :table-data="tableData"
      :total="total"
      @pagination="handlePagination"
    >
      <template #status="scope">
        {{ statusObj[scope.row.status] }}
        {{ scope.row.status === 1 ? `(${scope.row.restPaySecond})` : ''  }}
      </template>
      <template #type="scope">
       {{ scope.row.refundStatus === 3 ? '支出' : '收入'}}
      </template>
      <template #payAmount="scope">
       {{ scope.row.refundStatus === 3 ? '-' : ''}} {{ scope.row.payAmount }}
      </template>
      <template #opt="scope">
        <el-button type="primary" link @click="handleLook(scope.row)">详情</el-button>
        <el-button type="danger" v-if="scope.row.status === 1" link @click="changeStatus(scope.row, '6')">取消</el-button>
        <!-- <el-button type="danger" v-if="scope.row.refundStatus === 1" link @click="changeRefundStatus(scope.row, '3')">退款</el-button> -->
        <el-button type="success" v-if="scope.row.status === 2" link @click="changeStatus(scope.row, '3')">发货</el-button>
        <el-button type="warning" v-if="scope.row.status === 3" link>物流</el-button>
      </template>
    </Table>
   </div>
</template>

<script setup name="order">
import Table from "@/components/Table/index.vue";
import Query from "@/components/Query/index.vue";
import { getOrderList, saveOrder } from "@/api/order/index";
const { proxy } = getCurrentInstance()
import { useRouter } from 'vue-router'
const router = useRouter()
const tableData = ref([])
const total = ref(0)
const tableLoading = ref(true)
const statusObj = ref({
  1: '待付款',
  2: '待发货',
  3: '待收货',
  4: '待评价',
  5: '已完成',
  6: '已取消'
})
const formatter = function(row){
  const obj = {
    1: '待付款',
    2: '待发货',
    3: '待收货',
    4: '待评价',
    5: '已完成',
    6: '已取消',
  }
  return obj[row.status]
}
const refundStatusFormatter = function(row){
  const obj = {
    1: '可申请',
    2: '退款中',
    3: '已退款'
  }
  return obj[row.status]
}

const data = reactive({
  tableColumns: [
    { label: "交易流水号", prop: "outTradeNo" },
    { label: "订单编号", prop: "orderNo" },
    { label: "订单类型", prop: "type", slot: 'type'},
    { label: "订单金额", prop: "type", slot: 'payAmount'},
    { label: "昵称", prop: "nickname"},
    { label: "手机号", prop: "phone"},
    { label: "交易时间", prop: "gmtCreate"},
  ],
  queryColumns: [
   { label: "用户昵称", prop: "nickname", type: 'input' , attrs: { placeholder: '请输入用户昵称'}  },
   { label: "订单编号", prop: "orderNo", type: 'input', attrs: { placeholder: '请输入用户昵称'}  },
   { label: "交易流水号", prop: "outTradeNo", type: 'input', attrs: { placeholder: '请输入用户昵称'}  },
   { label: "付款开始时间", prop: "payBeginTime", type: 'datetime', attrs: { type: 'datetime', placeholder: '请选择'}  },
   { label: "付款结束时间", prop: "payBeginTime", type: 'datetime', attrs: {type: 'datetime', placeholder: '请选择'}  },
  ],
  pageParams: {
   current: 1,
   size: 10
  },
  queryParams: {}
})

const { tableColumns, queryColumns, pageParams, queryParams } = toRefs(data)
/** 获取列表数据 */
const getList = () => {
   tableLoading.value = true
   const data  = {
      ...queryParams.value,
      ...pageParams.value
   }
   getOrderList(data)
   .then(res => {
      tableData.value = res.data.records
      total.value = res.data.total
   })
   .finally(() => {
      tableLoading.value = false
   })
}
getList()
/** 搜索按钮操作 */
const handleQuery = (val) => {
  queryParams.value = val
  getList()
}
function changeStatus(row, status) {
  proxy.$modal.confirm('是否确认此操作？').then(function() {
    saveOrder({id: row.id, status}).then(() => {
      getList()
      proxy.$modal.msgSuccess("操作成功")
    })
  })
}
function changeRefundStatus(row, status) {
  proxy.$modal.confirm('是否确认此操作？').then(function() {
    saveOrder({id: row.id, refundStatus: status}).then(() => {
      getList()
      proxy.$modal.msgSuccess("操作成功")
    })
  })
}
const handlePagination = (val) => {
  pageParams.value = val
  getList()
}

const handleLook = row => {
  router.push({
    path: '/order/detail',
    query: {
      id: row.id
    }
  })
}

</script>
<style lang="scss">
.app-order {
  padding: 8px;
}
</style>